<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>08_吸顶元素作业</title>
		
		<style>
			.top_context{
				width: 100%;
				height: 200px;
				background-color: #e0e0e0;
				line-height: 200px;
				text-align: center;
			}
			/*吸顶灯内容元素初始效果*/
			.sticky_element{
				width: 100%;
				height: 50px;
				background-color: #000;
				color: #fff;
				line-height: 50px;
				text-align: center;
			}
			/*页面主体区域*/
			.main_context{
				width: 100%;
				height: 8000px;
				background-color: #e0e0e0;
			}
			/*切换样式：吸顶灯卡在页面顶部*/
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			//ready()事件源语法：$(document).ready(function(){});
			//                 简写：$(function(){});
			//总结： 页面元素全部加载完毕，再执行JQ相关操作
			// script元素放在最后一个body位置【可不写】
			$(function(){
				
			/*//  鼠标移动到顶部内容区域--弹出一个文本：我是顶部元素
			$(".top_context").mouseenter(function(){
				//BOM形式输出：浏览器弹窗输出文本效果
				alert("我是顶部元素");
			});*/
			
			//吸顶灯效果----------【了解】BOM案例：浏览器6个对象的方法使用
			//思路：1.鼠标滚动，滚动到吸顶灯元素位置处，效果改变
			//     2.页面顶部到吸顶灯位置：200px,大于200px
			//     3.追加第一个样式：固定定位，页面顶部位置
			
			//     1.追加样式：吸顶灯卡在页面顶部的样式
			//     2.固定值：页面顶部到吸顶灯位置
			//     3.固定值>滚动值，滚动范围超出200px  实现切换
			
			// 固定值：页面顶部到吸顶灯位置--BOM位置
			//offset()  获取或者设置元素相对于文档偏移量
			//offset().top  从顶部到吸顶灯元素的偏移量
			var se=$(".sticky_element").offset().top;
			//求滚动值：BOM的对象+事件源
			// $(window)  抓取页面window对象，监听窗口事件：窗口改变、滚动
			// 理解： 实时抓取页面的滚动值
			$(window).scroll(function(){
				//滚动值：获取页面滚动的位置
			//scrollTop()获取页面滚动垂直距离
			var st=$(window).scrollTop();
			
			//判断  滚动值大于固定值，滚动超过200px，实现切换：吸顶效果
			if(st>se){
				//条件成立，大于200px  切换吸顶效果
				$(".sticky_element").addClass("sticky");
				}else{
					//条件不成立，小于200px
					$(".sticky_element").removeClass("sticky");
				}
			});
			
			});
		</script>
	</head>
	<body>
		<div class="top_context">顶部内容区域</div>
		<div class="sticky_element">我是吸顶元素</div>
		<div class="main_context">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo itaque debitis dolores consequuntur. Recusandae repellendus quas dolores ipsa quae ratione iste mollitia. Facilis quos nulla voluptate ipsa deleniti sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta similique, quam quas vero quae nisi labore nihil nostrum impedit reiciendis delectus at facilis aspernatur, animi voluptas odit porro minima sit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, nulla nam dolore eius doloribus enim dignissimos ratione alias asperiores harum a magni dicta assumenda libero aperiam veniam dolorem. Necessitatibus, fugit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, inventore nihil? Nulla commodi modi officia. Explicabo repellendus quas dignissimos voluptatibus voluptas expedita quae recusandae eum officia voluptate! Voluptates, eius cumque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi obcaecati magni facilis recusandae quisquam labore earum ea, sint expedita asperiores non nihil. Dolorum expedita, saepe debitis quidem ullam iste explicabo. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium deleniti, deserunt vitae pariatur eligendi voluptatum est aspernatur beatae rem, repudiandae a numquam ipsam in! Perspiciatis cum dignissimos necessitatibus! Iusto, itaque? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos a eligendi cumque maiores nulla veniam earum distinctio iste cupiditate similique. Numquam qui recusandae facilis debitis necessitatibus? Ab quaerat molestias repellendus!
			</p>
		</div>
		
	</body>
</html>